<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column type="index" label="Rank" width="60" />
    <el-table-column prop="nick" label="Account" width="300" />
    <el-table-column prop="score" label="Score" width="70" />
    <el-table-column prop="penalty" label="Penalty" width="80" />
    <el-table-column
      v-for="item in problemNum"
      :key="item.num"
      :prop="item.num"
      :label="item.num+':'+item.contestAccepted +'/'+ item.contestSubmit"
      width="80"
      :render-header="renderHeader"
    >
      <template slot-scope="scope">
        <div v-if="scope.row[item.num].submit<1" class="rank-box" style="background-color: #f5f5f5;" />
        <div
          v-else-if="scope.row[item.num].result>0"
          class="rank-box"
          :style="{backgroundColor: scope.row[item.num].first===1?'#27ae60':'#39f185',paddingTop:'12px'}"
        >{{ parseInt(scope.row[item.num].time/3600)+':'+parseInt(scope.row[item.num].time/60)%60+':'+scope.row[item.num].time%60 }}
          <p v-if="scope.row[item.num].submit>1" style="margin: 0">{{ '-'+(scope.row[item.num].submit-1) }}</p>
        </div>
        <div
          v-else-if="scope.row[item.num].result<1"
          class="rank-box"
          style="background-color: #f56e7a;line-height: 65px;"
        >{{ '-'+scope.row[item.num].submit }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { contestRank } from '@/api/contest'

export default {
  name: 'ContestRank',
  props: {
    contestId: {
      type: String,
      default: -1
    }
  },
  data() {
    return {
      problemNum: [{ num: 'A', contestAccepted: 12, contestSubmit: 34 }, { num: 'B', contestAccepted: 12, contestSubmit: 34 }, { num: 'C', contestAccepted: 22, contestSubmit: 341 }],
      tableData: [{
        nick: '',
        score: 0,
        penalty: 0,
        A: { submit: 3, result: 0 },
        B: { submit: 5, result: 1, time: '00:16:35', first: 1 },
        C: { submit: 11, result: 0 }
      }]
    }
  },
  created() {
    this.contestRank()
  },
  methods: {
    contestRank() {
      contestRank({ contestId: this.contestId }).then(res => {
        this.problemNum = res.data.problemNum
        this.tableData = res.data.tableData
      })
    },
    renderHeader(h, { column, $index }) {
      return h('div', { style: { width: '80px', textAlign: 'center', marginLeft: '-10px' }}, [
        h('span', {}, column.label.split(':')[0]),
        h('br'),
        h('span', {}, column.label.split(':')[1])
      ])
    }
  }
}
</script>

<style scoped>
.rank-box{
  width: 80px;
  text-align: center;
  height: 65px;
  margin-left: -10px;
}
.el-table{
  color: #000;
  font-weight: bold;
}
.el-table thead{
  color: #000;
}
.el-table >>> td,.el-table >>> th{
  padding: 0;
}
.el-table >>> thead{
  color: #000;
}
.el-table >>> td{
  border-bottom: 1px solid #000;
}
.el-table >>> th.is-leaf{
  border-bottom: 2px solid #000;
}
</style>
